<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>社区评论后台管理</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<link rel="stylesheet" href="css/admin_myLayui.css">
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
			<div class="layui-logo"><img alt="" src="imgs/logo_02.png"></div>
			<!-- 头部区域（可配合layui已有的水平导航） -->
			<ul class="layui-nav layui-layout-left">
				<li class="layui-nav-item"><a href="">控制台</a></li>
				<li class="layui-nav-item"><a href="">商品管理</a></li>
				<li class="layui-nav-item"><a href="">用户</a></li>
				<li class="layui-nav-item"><a href="javascript:;">其它系统</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="">邮件管理</a>
						</dd>
						<dd>
							<a href="">消息管理</a>
						</dd>
						<dd>
							<a href="">授权管理</a>
						</dd>
					</dl></li>
			</ul>
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item"><a href="javascript:;"><%=request.getSession().getAttribute("username") %>
				</a>
				</li>
				<li class="layui-nav-item"><a href="fs.do?op=removesession">退了</a></li>
			</ul>
		</div>

		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
		<ul class="layui-nav layui-nav-tree" lay-filter="test">
					<li class="layui-nav-item "><a class=""
						href="javascript:;">用户信息</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="admin_users.jsp">用户列表</a>
							</dd>
							<dd>
								<a href="useradd.jsp">添加用户</a>
							</dd>
						</dl></li>
					<li class="layui-nav-item"><a href="javascript:;">公寓信息</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="admin_house.jsp">房屋列表</a>
							</dd>
							<dd>
								<a href="houseadd.jsp">添加房屋信息</a>
							</dd>
						</dl></li>
					<li class="layui-nav-item"><a href="javascript:;">缴纳信息</a>
					  <dl class="layui-nav-child">
							<dd>
								<a href="admin_prices.jsp">缴纳列表</a>
							</dd>
							<dd>
								<a href="priceadd.jsp">添加缴纳信息</a>
							</dd>
						</dl>
					</li>
					<li class="layui-nav-item"><a href="javascript:;">房源信息</a>
					  <dl class="layui-nav-child">
							<dd>
								<a href="admin_housing.jsp">房源列表</a>
							</dd>
							<dd>
								<a href="housingadd.jsp">添加房源信息</a>
							</dd>
						</dl>
					</li>
					<li class="layui-nav-item"><a href="fix.jsp">故障内容</a></li>
					<li class="layui-nav-item layui-this"><a href="admin_forum.jsp">社区评论</a></li>
				</ul>
			</div>
		</div>



		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div style="padding: 15px;">
				<div class="demoTable">
					搜索ID：
					<div class="layui-inline">
						<input class="layui-input" name="id" id="demoReload"
							autocomplete="off" placeholder="搜索发表人...">
					</div>
					<button class="layui-btn" data-type="reload">搜索</button>
				</div>
				<table class="layui-hide" id="test" lay-filter="test"></table>

				<script type="text/html" id="toolbarDemo">
                       <div class="layui-btn-container">
                             <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                             <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                             <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
                       </div>
                </script>

				<script type="text/html" id="barDemo">
                     <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </script>


				<script src="layui/layui.js" charset="utf-8"></script>
				<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

				<script>
					layui.use([ 'table', 'form' ], function() {
						var table = layui.table;

						table.render({
							elem : '#test',
							url : 'fs.do',
							toolbar : '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
							,
							defaultToolbar : [ 'filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
								title : '提示',
								layEvent : 'LAYTABLE_TIPS',
								icon : 'layui-icon-tips'
							} ],
							title : '用户数据表',
							cols : [ [
									{
										type : 'checkbox',
										fixed : 'left'
									},
									{
										field : 'articleId',
										title : '编号',
										width : 80,
										fixed : 'left',
										unresize : true,
										sort : true
									},
									{
										field : 'articleTitle',
										title : '文字标题',
										width : 150,
										edit : 'text'
									},
									{
										field : 'articleContent',
										title : '文字内容',
										width : 297,
										edit : 'text',
										templet : function(res) {
											return '<em>' + res.articleContent
													+ '</em>'
										}
									}, {
										field : 'userName',
										title : '发表人',
										width : 150,
										edit : 'text',
										sort : true
									}, {
										field : 'articleDate',
										title : '发布时间',
										width : 150
									}, {
										fixed : 'right',
										title : '操作',
										toolbar : '#barDemo',
										width : 150
									} ] ],
							page : true,
							id : 'testReload'
						});

						/*
						模糊查询操作
						 */
						var $ = layui.$, active = {
							reload : function() {
								var demoReload = $('#demoReload');

								//执行重载
								table.reload('testReload', {
									page : {
										curr : 1
									//重新从第 1 页开始
									},
									where : {
										"strLike" : demoReload.val()
									}
								}, 'data');
							}
						};

						$('.demoTable .layui-btn').on('click', function() {
							var type = $(this).data('type');
							active[type] ? active[type].call(this) : '';
						});

						//头工具栏事件
						table.on('toolbar(test)', function(obj) {
							var checkStatus = table.checkStatus(obj.config.id);
							switch (obj.event) {
							case 'getCheckData':
								var data = checkStatus.data;
								layer.alert(JSON.stringify(data));
								break;
							case 'getCheckLength':
								var data = checkStatus.data;
								layer.msg('选中了：' + data.length + ' 个');
								break;
							case 'isAll':
								layer.msg(checkStatus.isAll ? '全选' : '未全选');
								break;

							//自定义头工具栏右侧图标 - 提示
							case 'LAYTABLE_TIPS':
								layer.alert('这是工具栏右侧自定义的一个图标按钮');
								break;
							}
							;
						});
                        
						//监听提交
						 layui.form.on('submit(demo1)', function(data){
						   /*  layer.alert(JSON.stringify(data.field), {
						      title: '最终的提交信息'
						    })  */
						    console.log(data.field);
						    $.ajax({
						    	url : "fs.do?op=update",
						    	type : "post",
						    	contentType : "application/json",
						    	data : JSON.stringify(data.field),
						    	success:function(data){
						    		layer.msg(data == "true" ? "操作成功！" : "操作失败！", {
										icon : 1
									},function(){
												parent.layer.closeAll();
												location.reload();	
										});
						    	}
						    });
						    return false;
						  });
						
						//监听行工具事件
						table.on('tool(test)', function(obj) {
							var data = obj.data;
							/* console.log(obj) */
							//删除操作
							if (obj.event === 'del') {
								layer.confirm('真的删除行么', function(index) {
									$.post("fs.do", "op=del&articleId="
											+ data.articleId, function(data) {
										layer.msg(data == "true" ? "操作成功！"
												: "操作失败！", {
											icon : 1
										});
										obj.del();
										layer.close(index);
									})
								});
							} else if (obj.event === 'edit') {
								$("#articleId").val(data.articleId)
								$("#articleTitle").val(data.articleTitle)
								$("#articleContent").val(data.articleContent)
								$("#userName").val(data.userName)
								$("#articleDate").val(data.articleDate)
								layer.open({
									type : 1,
									title : '编辑',
									content : $("#forumdiv"),
									area : [ '700px', '550px' ]
								})
								layui.form.render()
							}
						});
					});
				</script>

				<div class="layui-footer">
					<!-- 底部固定区域 -->
					© layui.com - 底部固定区域
				</div>

			</div>
		</div>
		<!-- 弹出层修改操作框 -->
		<div id="forumdiv" style="display: none;">
			<form class="layui-form" action="" lay-filter="example">

				<div class="layui-form-item">
					<label class="layui-form-label">编号</label>
					<div class="layui-input-block">
						<input type="text" id="articleId" name="articleId"
							lay-verify="title" autocomplete="off" class="layui-input"
							readonly="readonly">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">文字标题</label>
					<div class="layui-input-block">
						<input type="text" id="articleTitle" name="articleTitle"
							lay-verify="title" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">文字内容</label>
					<div class="layui-input-block">
						<textarea placeholder="请输入内容" id="articleContent"
							class="layui-textarea" name="articleContent"></textarea>
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">发表人</label>
					<div class="layui-input-block">
						<input type="text" id="userName" name="userName"
							lay-verify="title" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">发表时间</label>
					<div class="layui-input-block">
						<input type="text" id="articleDate" name="articleDate"
							lay-verify="title" autocomplete="off" class="layui-input"
							readonly="readonly">
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="submit" class="layui-btn" lay-submit=""
							lay-filter="demo1">确认修改</button>
					</div>
				</div>
			</form>
		</div>
		<script>
			//JavaScript代码区域
			layui.use('element', function() {
				var element = layui.element;
 
			});
		</script>
</body>
</html>